<template>
	<view class="creat-task">
		<view class="title">
			<view class="" @click="back">
				<img src="../../static/images/backBar.png" style="{width: 50rpx; height: 50rpx;}" alt="">
			历史任务
			</view>
			
			<!-- <u-tag text="审批中" type="primary" mode="light" /> -->
			<u-tag text="可编辑" type="info" mode="light" @click="goUpdata()" v-if="list.StoreageTaskState == 0" />
			<u-tag text="审批中" type="primary" mode="light" v-if="list.StoreageTaskState == 4" />
			<u-tag text="已通过" type="success " mode="light" v-if="list.StoreageTaskState == 1" />
			<u-tag text="已打款" type="warning " mode="light" v-if="list.StoreageTaskState == 3" />
			<u-tag text="已拒绝" type="error " mode="light" v-if="list.StoreageTaskState == 2" />
		</view>
		<view class="task-card">
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="map" color="#181B1F"></u-icon>仓库地址
					</view>
					<view class="">
						{{countrys}}
					</view>
				</view>
				<view class="line">
					<view class="line-title">
						<u-icon name="list-dot" color="#181B1F"></u-icon>任务编号
					</view>
					<view class="line-title">
						{{ list.StoreageTaskSn }}
					</view>
				</view>
				<view class="line">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>
						创建日期
					</view>
					<view>
						{{ list.CreateDateTime }}
					</view>
				</view>

			</view>
		</view>
		<u-tabs-swiper class="tabs" ref="uTabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"
			active-color="#004FFF" inactive-color="#999999" bg-color="#efefef" swiperWidth="750"></u-tabs-swiper>
		<!-- tab页面切换数据 -->
		<view class="team-list" v-if="current == 0">
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="file-text" color="#181B1F"></u-icon>已扫描订单
					</view>
				</view>
				<view class="line">
					<view class="">
					</view>
					<view class="line-num">
						{{ list.PackageCount || 0 }}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="checkmark-circle" color="#181B1F"></u-icon>已确认订单
					</view>
				</view>
				<view class="line">
					<view class="">
					</view>
					<view class="line-num1">
						{{ list.PackageCount || 0 }}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="red-packet" color="#181B1F"></u-icon>应付金额
					</view>
				</view>
				<view class="line">
					<view class="">
					</view>
					<view class="line-num1">
						₱ {{ list.TaskMoney || 0 }}
					</view>
				</view>
			</view>
		</view>
		<view class="team-list" v-if="current == 1">
			<view class="card">
				<view class="line">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>订单数量
					</view>
					<view class="line-num">
						{{ list.PackageCount || 0 }}
					</view>
				</view>
				<view class="line">
					<view class="line-title">
						<u-icon name="calendar" color="#181B1F"></u-icon>订单金额
					</view>
					<view class="line-num">
						₱ {{ list.TaskMoney || 0 }}
					</view>
				</view>
			</view>
			<!-- 订单详情 -->
			<view v-if="detailList.length > 0">
				<view class="order-box" v-for="(item, index) in detailList" :key="index">
					<view class="order-left">
						<view class="order-num">
							{{ item.StoreageTaskDetailId }}
						</view>
						<view class="">
							<view class="">
								{{ item.OrderSn }}
							</view>
							<view class="money">
								<!-- 平台logo -->
								<img src="" alt="">
								₱ {{ item.PayMoney || 0 }}
							</view>
						</view>
					</view>
					<view class="order-right">
						<u-icon name="checkmark-circle-fill" color="#18BA3F" size="60"></u-icon>
					</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script>

import {
	taskDetail
} from '@/api/all.js';
export default {
	data() {
		return {
			tabs: [{
				name: '任务详情',

			}, {
				name: '订单详情',
			}],
			current: 0,
			none: false,
			show: false,
			taskId: '',
			list: {},
			detailList: [],
			countrys:'',
			StoreageAddress:uni.getStorageSync('userinfo').StoreageAddress
			
		}
	},
	onLoad(e) {
		this.taskId = JSON.parse(e.taskId);
		console.log(this.taskId)

	},
	mounted() {
		this.getTaskDetail();
	},
	methods: {
		tabsChange(e) {
			this.current = e;
			// this.getData();
		},
		onTask() {
			this.show = true;
		},
		onClose() {
			this.show = false;
		},
		getTaskDetail() {
			let postdata = {
				taskId: this.taskId,
			};
			taskDetail(postdata).then(res => {
				if (res.statusCode == 200) {
					let a=uni.getStorageSync('userinfo').StoreageAddress
					// console.log(a)
					if(a=="PH"){
						this.countrys="菲律宾";
					}
					if(a=="TH"){
						this.countrys="泰国";
					}
					if(a=="TW"){
						this.countrys="台湾";
					}
					if(a=="ID"){
						this.countrys="菲律宾";
					}
					this.list = res.data.Data;
					this.detailList = res.data.Data.Details
					console.log(this.detailList)
				}
			})
		},
		back(){
			//uni.navigateBack()//默认delta:1
			uni.navigateBack({
				delta:1,//返回层数，2则上上页
			})
		},
		// 可编辑点击
		goUpdata() {
			let taskId = this.taskId
			uni.navigateTo({
				url: `/pages/createTask/createTask?taskId=${taskId}`
			})
			// uni.navigateTo({
			// 	url: './detail'
			// });
		},

	}
}
</script>

<style lang="scss">
.creat-task {
	display: block;
	position: relative;
	width: 100%;
	height: 100vh;
	background: #efefef;
	overflow: auto;

	.tabs {
		padding: 0 48rpx;
	}

	.title {
		font-size: 24px;
		color: #10275A;
		margin-top: 100rpx;
		padding: 0 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.team-list {
		margin-top: 20rpx;
	}

	.task-card {
		margin-top: 30rpx;
	}

	.card {
		background-color: #fff;
		margin: 0 48rpx;
		padding: 32rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 50rpx;
		.orderNum {
			font-size: 16px;
			font-weight: 500;
		}

		.line-title {
			display: flex;

		}
	}

	.line-num {
		font-size: 48rpx;
		font-weight: 600;
		color: #292D32;
	}

	.line-num1 {
		font-size: 48rpx;
		font-weight: 600;
		color: #376DFF;
	}

	.btn-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 32rpx;

		.btn {
			width: 320rpx;
		}
	}

	.dialog-1 {
		padding: 64rpx 32rpx;

		.name {
			font-size: 24px;
			color: #10275A;
			margin-bottom: 64rpx;
		}

		.text {
			font-size: 32rpx;
			color: #181B1F;
			margin-bottom: 64rpx;
		}

		.card-border {
			border: 1px solid #999999;
			margin-bottom: 30rpx;
			padding: 32rpx;
			border-radius: 16rpx;
		}
	}

	.order-box {
		margin: 0 48rpx;
		margin-bottom: 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-radius: 16rpx;

		.order-left {
			display: flex;

			.order-num {
				width: 96rpx;
				height: 44rpx;
				background: #F3F3F3;
				font-size: 28rxp;
				color: #10275A;
				text-align: center;
				border-radius: 12rpx;
				margin-right: 30rpx;
			}

			.money {
				font-size: 32rpx;
				font-weight: 600;
				color: #0052D9;
				display: flex;
				align-items: center;
			}
		}

	}
}
</style>
